<template>
    <div class="project-list">
      <section class="head-section">
        <!--侧栏medal-->
          <div class="page-cover" @touchmove.prevent v-if="show" @click="shiftMenu"></div>
        <!--标题-->
          <header @touchmove.prevent @click="shiftMenu" class="header" :class="{'show':show}">
              <span class="class-name">{{className}}</span>
              <div class="class-icon"><span class="iconfont icon-fenlei"></span></div>
          </header>
        <!--侧栏-->
          <nv-menu :show-menu="show" :classList="classList" @changeClass="changeClassHandle"></nv-menu>
      </section>
      <!--内容-->
      <section class="goods-section">
        <ul class="goods-list" v-infinite-scroll="requestData" infinite-scroll-disabled="cellLoading" infinite-scroll-distance="20" infinite-scroll-immediate-check="false">
          <li class="goods-li" v-for="cellData in goodsList" @click="clickDetailsHandle(cellData)" :key="cellData.id">
            <rect-good-item  :good-item="cellData"></rect-good-item>
          </li>
        </ul>
      </section>
      <!--切换分类的时候显示加载中-->
      <div v-show="showLoadTip" class="tip-div">
          <img class="img" src="../../../assets/loading.gif">
          <div class="tip-word">加载中<span style="letter-spacing:0">...</span></div>
      </div>
    </div>
</template>

<script>
import $ from "jquery";
import { mapState } from "vuex";
import { InfiniteScroll } from "mint-ui";
import Vue from "vue";
import rectGoodItem from "./rectGoodItem.vue";
import nvMenu from "./menu.vue";
import utils from "../../../common/js/utils.js";

Vue.use(InfiniteScroll);

export default {
  name: "project-list",
  data() {
    return {
      cellLoading: true, //是否正在加载更多
      show: false, //是否显示侧栏
      className: "", //当前项目的名称
      curIndex: 0, //当前项目的tab索引
      pageNum: 10,
      originaItem: {
        id: "0",
        name: "全部项目",
        curPage: 0,
        exitGoods: [],
        existIdArr: [],
        allLoaded: false
      },
      curItemInfo: null, //当前的分类信息
      classList: [], //项目信息列表
      goodsList: [], //当前显示的项目
      showLoadTip:true
    };
  },
  computed: {
    ...mapState(["openid", "path", "soursePath", "storeid"])
  },
  mounted() {
    this.curItemInfo = this.originaItem;
    this.className = this.curItemInfo.name;
    utils.throttle(this.firstLoadData, 300, 0)();
  },
  methods: {
    firstLoadData() {
      //分类第一次加载数据
      this.requestData(false);
    },
    requestData(infinite = true) {
      //infinite是否是loadmore加载
      this.$http
        .post(this.path + "store/Goods/goods_list", {
          type: "1",
          page: this.curItemInfo.curPage,
          storeid: this.storeid,
          goodstp: this.curItemInfo.id //项目分类（不写或者为0 是全部）
        })
        .then(response => {
          if (infinite && this.curItemInfo.curPage == 0) return;
          if (infinite && this.cellLoading) return;
          this.cellLoading = true;
          if(!infinite) this.showLoadTip=false;
          if (!this.classList || this.classList.length == 0) {
            this.initClassList(response.body.result.tparr);
          }
          let serverData = response.body.result.arr;
          if (!serverData || serverData.length == 0) {
            //数据为空
            this.cellLoading = true;
            this.curItemInfo.allLoaded = true;
          } else {
            //有数据
            if (serverData.length % this.pageNum == 0) {
              //满一页数据
              this.curItemInfo.curPage++;
              this.cellLoading = false;
            } else {
              //不满一页
              this.cellLoading = true;
              this.curItemInfo.allLoaded = true;
            }
            for (let i = 0; i < serverData.length; i++) {
              let serverItem = serverData[i];
              let id = serverItem.id;
              if (this.curItemInfo.existIdArr.indexOf(id) >= 0) continue;
              this.curItemInfo.exitGoods.push(serverItem);
              this.curItemInfo.existIdArr.push(id);
            }
            this.goodsList = this.curItemInfo.exitGoods;
          }
        })
        .catch(response => {
          console.log(response);
          this.$store.dispatch("toggleLoading", false);
        });
    },
    initClassList(typeArr) {
      this.classList = [this.originaItem];
      for (let i = 0; i < typeArr.length; i++) {
        let typeItem = typeArr[i];
        this.classList.push({
          id: typeItem.id.toString(),
          name: typeItem.typename,
          curPage: 0,
          exitGoods: null,
          existIdArr: [],
          allLoaded: false
        });
      }
      console.log(this.classList);
    },
    throttleRequest() {
      document.body.scrollTop = 0;
      this.goodsList = [];
      this.showLoadTip=true;
      utils.throttle(this.firstLoadData, 300, 500)();
    },
    clickDetailsHandle(cellData) {
      //点击了项目item
      this.$router.push({ path: "/details/" + cellData.id });
    },
    shiftMenu() {
      this.show = !this.show;
      if(this.show){
        $("body").css("overflow", "hidden");
      }else{
        $("body").css("overflow", "auto");
      }
    },
    changeClassHandle(index) {
      this.curIndex = index;
      this.shiftMenu();
      this.curItemInfo = this.classList[index];
      this.className = this.curItemInfo.name;
      if (!this.curItemInfo.exitGoods) {
        this.curItemInfo.exitGoods = [];
        this.throttleRequest();
      } else {
        if (this.curItemInfo.allLoaded) this.cellLoading = true;
        else this.cellLoading = false;
        this.goodsList = this.curItemInfo.exitGoods;
      }
    }
  },
  components: {
    rectGoodItem,
    nvMenu
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.project-list {
  box-sizing: border-box;
  min-height: 100%;
  padding-top: 0.4rem;
  background-color: #f2f2f2;

  .head-section {
    .page-cover {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 8;
    }

    .header {
      position: relative;
      width: 100%;
      background-color: rgb(255, 255, 255);
      position: fixed;
      top: 0;
      left: 0;
      // transition: all 0.3s ease;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
      z-index: 10;
      height: 0.4rem;
      display: flex;
      align-items: center;
      justify-content: center;

      // &.show {
      //   transform: translateX(1.46rem);
      // }

      .class-name {
        color: #ff65a8;
        letter-spacing: 0.01rem;
        font-size: 0.14rem;
      }

      .class-icon {
        position: absolute;
        transform: translate(0, -50%);
        left: 0.15rem;
        top: 50%;

        .icon-fenlei {
          color: #acacac;
          font-size: 0.21rem;
        }
      }
    }
  }

  .goods-section {
    width: 100%;
    box-sizing: border-box;
    padding: 0.02rem 0.14rem 0.1rem 0.14rem;

    .goods-list {
      width: 100%;
      flex-wrap: wrap;
      display: flex;
      justify-content: space-between;

      .goods-li {
        flex: 0 1 1.4rem;
        margin-top: 0.1rem;
        background-color: #fff;
      }
    }
  }

  .tip-div {
    height: 0.4rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .img {
      height: 0.18rem;
      width: 0.18rem;
    }

    .tip-word {
      margin-top: 0.01rem;
      font-size: 0.13rem;
      margin-left: 0.08rem;
      letter-spacing: 0.02rem;
      color: #8a8a8a;
    }
  }
}
</style>
